<template>
  <div>
    <el-form label-width="100px" class="demo-ruleForm">
      <el-form-item
      >
        <el-input
          type="text"
          v-model="stu"
          autocomplete="off"
          id="query"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-table :data="tableData.filter(data => !stu || data.name.toLowerCase().includes(stu.toLowerCase()))"
    style="width: 100%">
      <el-table-column prop="account" label="账号" width="100">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
      <el-table-column prop="gender" label="性别" width="100">
      </el-table-column>
      <el-table-column prop="phone" label="电话号码"> </el-table-column>
      <el-table-column prop="position" label="管理员" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.position == 0">超级管理员</el-tag>
          <el-tag v-else-if="scope.row.position == 1">平台管理员</el-tag>
          <el-tag v-else>门店管理员</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isBan" label="是否禁用" width="100">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.isBan }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="id">
        <template slot-scope="scope">
          <el-dialog title="修改" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <span>账号</span>
              <el-input
                type="text"
                v-model="form.account"
                placeholder="请输入账号"
                disabled
              ></el-input>

              <span>姓名</span>
              <el-input
                v-model="form.name"
                placeholder="请输入姓名"
                disabled
              ></el-input>
              <span>年龄</span>
              <el-input
                v-model="form.age"
                placeholder="请输入年龄"
                disabled
              ></el-input>
              <span>性别</span>
              <el-input
                v-model="form.gender"
                placeholder="请输入性别"
                disabled
              ></el-input>
              <span>手机号</span>
              <el-input
                v-model="form.phone"
                placeholder="请输入手机号"
                disabled
              ></el-input>
              <span>管理员</span>
              <el-input
                v-model="form.position"
                placeholder="请输入级别代数"
                disabled
              ></el-input>
            </el-form>
            <span>状态</span>
            <br />
            <el-select v-model="values" placeholder="请选择">
              <el-option
                v-for="item in option"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <br />
            <span>是否禁用</span>
            <br />
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div slot="footer" class="dialog-footer">
              <div>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
              </div>
              <div @click="reviseHendel">
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </div>
          </el-dialog>
          <el-button
            size="mini"
            v-if="scope.row.status!='已通过'"
            disabled
            @click="clickleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
             v-else
            @click="clickleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
           <el-button
            v-if="scope.row.status!='已通过'"
            disabled
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
          <el-button
            v-else
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            v-model="scope.row.id"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        ref="info"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentpage"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { app } from "@/api/user.js";
import { add } from "@/api/user.js";
import { deleltes } from "@/api/user.js";
import { revise } from "@/api/user.js";
export default {
  data() {
    return {
      tableData: [
        // {
        //   account: "",
        //   name: "",
        //   age: "",
        //   gender: "",
        //   phone: "",
        //   position: "",
        //   status: "",
        // },
      ],
      stu: "",
      dialogVisible: false,
      arr: {
        account: "",
        name: "",
        age: "",
        gender: "",
        phone: "",
        position: "",
        status: "",
      },
      dialogFormVisible: false,
      form: {
        id: "",
        name: "",
        account: "",
        age: "",
        gender: "",
        delivery: false,
        phone: "",
        position: "",
        status: "",
        isBan: "",
      },
      formLabelWidth: "120px",
      options: [
        {
          value: "true",
          label: "禁用",
        },
        {
          value: "false",
          label: "未禁用",
        },
      ],
      value: "",
      option: [
        {
          value: "0",
          label: "未通过",
        },
        {
          value: "1",
          label: "申请中",
        },
        {
          value: "2",
          label: "已通过",
        },
      ],
      values: "",
      currentpage:1,
      pagesize:5,
      total:0
    };
  },
  mounted() {
    //渲染函数
    // let size = this.pagesize;
    // let current = this.currentpage;
    app(2).then((res) => {
      console.log(res, "123456");
      this.tableData = res.rows;
      this.total=parseInt(res.total)
      this.currentpage = parseInt(res.current);
      this.pagesize = parseInt(res.size);
      res.rows.map((item) => {
        if (item.status == 0) {
          item.status = "未通过";
        } else if (item.status == 1) {
          item.status = "申请中";
        } else {
          item.status = "已通过";
          console.log(item.status);
        }
      });
      res.rows.map((item) => {
        if (item.isBan == true) {
          item.isBan = "已禁用";
        } else {
          item.isBan = "未禁用";
        }
      });
    });
  },
  methods: {
    //每页条数
    handleSizeChange(val) {
      //当前每页显示多少条
      console.log(val)
      let size = val;
      this.pagesize= val;
      //当前显示第几页
      let current = this.currentpage;
      app(2, { current,size }).then((res) => {
        // console.log(params);
        this.tableData = res.rows;
        console.log(res.rows);
        
        res.rows.map((item) => {
          if (item.status == 0) {
            item.status = "未通过";
          } else if (item.status == 1) {
            item.status = "申请中";
          } else {
            item.status = "已通过";
            // console.log(item.status);
          }
        });
        res.rows.map((item) => {
          if (item.isBan == true) {
            item.isBan = "已禁用";
          } else {
            item.isBan = "未禁用";
          }
        });
        console.log(res);
      });
      console.log(size, current, "12345");
    },
    //第几页
    handleCurrentChange(val) {
      console.log(val)
      //当前每页显示多少条
      let size = this.pagesize;
      //当前显示第几页
      let current = val;
      this.currentpage = val;
      app(2, { current,size }).then((res) => {
        this.tableData = res.rows;
        // this.total=res.totalPage
        console.log(res.rows);
        res.rows.map((item) => {
          if (item.status == 0) {
            item.status = "未通过";
          } else if (item.status == 1) {
            item.status = "申请中";
          } else {
            item.status = "已通过";
            // console.log(item.status);
          }
        });
        res.rows.map((item) => {
          if (item.isBan == true) {
            item.isBan = "已禁用";
          } else {
            item.isBan = "未禁用";
          }
        });
      });
    },
    //修改触发
    clickleEdit(index, row) {
      this.dialogFormVisible = true;
      console.log(row._id);
      this.form.id = row._id;
      this.form.account = row.account;
      this.form.name = row.name;
      this.form.age = row.age;
      this.form.gender = row.gender;
      this.form.phone = row.phone;
      this.form.position = row.position;
      
    },
    //修改事件
    reviseHendel() {
      this.form.status = this.values;
      this.form.isBan = this.value;
      console.log(this.value);
      revise(this.form.id, this.form).then((res) => {
        console.log(res);
      });
    },
    //增加事件
    clickHendels() {
      console.log(this.arr);
      add(this.arr).then((res) => {
        console.log(res);
      });
    },
    dialogClick() {
      //打开弹出层
    },
    //删除事件
    handleDelete(index, row) {
      // console.log(row,'34567889');
      // console.log(row._id);
      confirm('你确定要删除吗')
      deleltes(row._id).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style>
#operation {
  width: 140px;
}
#query {
  width: 300px;
}
.demo-ruleForm {
  display: flex;
}
.dialog-footer {
  display: flex;
}
.dialog-footer > div {
  margin-left: 20px;
}
</style>